import {Component, ContentChildren, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, QueryList, Renderer2, TemplateRef, ViewEncapsulation} from '@angular/core';
import {animate, state, style, transition, trigger} from "@angular/animations";
import {Options} from "./popover.directive";
import {AppService} from "../../../app.service";
import {GlobalEvent} from "../../../support/event.definition";

const directions = ["top", "right", "bottom", "left"];

@Component({
  selector: '.ss-platform-popover-wraper',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class PopoverComponent implements OnInit, OnDestroy {

  options: Options;
  element: HTMLDivElement;
  sourceElement: HTMLElement;
  unScrollTableSubscribe;

  constructor(private elementRef: ElementRef, private $app: AppService) {
    this.unScrollTableSubscribe = this.$app.subscribe(GlobalEvent.ScrollTable, () => {

      console.log(1111);
      this.resize();
    });
  }

  ngOnInit(): void {
    this.element = this.elementRef.nativeElement.children.item(0);
    this.resize();
    if (this.options.init) {
      setTimeout(() => this.options.init.call(this))
    }
  }

  @HostListener("window:resize")
  resize(): void {
    setTimeout(() => {
      let sourceRect = this.sourceElement.getBoundingClientRect(),
        currentRect = this.element.getBoundingClientRect(),
        bottomHeight = document.body.clientHeight - (sourceRect.y + sourceRect.height),
        rightWidth = document.body.clientWidth - (sourceRect.x + sourceRect.width),
        topHeight = sourceRect.y,
        leftWidth = sourceRect.x,
        options = this.options,
        contentDirection = this.element.querySelector("[ss-platform-popover-direction]");

      // 自定义位置 1
      if (contentDirection) {
        let direction = JSON.parse(contentDirection.getAttribute("ss-platform-popover-direction"));
        // console.log("自定义位置")
        this.element.style.top = (sourceRect.y + (direction.top ? direction.top : 0)) + "px";
        this.element.style.left = (sourceRect.x + (direction.left ? direction.left : 0)) + "px";
      }
      // 自定义位置 2
      else if (typeof options.direction == "object") {
        // console.log("自定义位置")
        this.element.style.top = (sourceRect.y + (options.direction.top ? options.direction.top : 0)) + "px";
        this.element.style.left = (sourceRect.x + (options.direction.left ? options.direction.left : 0)) + "px";
      }
      // 自动计算
      else {
        // console.log("自动计算位置")
        // 确定显示位置、优先级：底部->头部->右侧->左侧
        // 底部
        let direction = options.direction;
        if (directions.indexOf(direction) == -1) {
          if (bottomHeight > currentRect.height) {
            direction = "bottom";
          }
          // 头部
          else if (topHeight > currentRect.height) {
            direction = "top";
          }
          // 右侧
          else if (rightWidth > currentRect.width) {
            direction = "right";
          }
          // 左侧
          else if (leftWidth > currentRect.width) {
            direction = "left";
          }
          // 底部
          else {
            direction = "bottom";
          }
        }
        // console.log(direction)
        // 底部
        if (direction == "bottom") {
          this.element.style.top = (sourceRect.y + sourceRect.height) + "px";
          this.element.style.left = sourceRect.x + "px";
        }
        // 头部
        else if (direction == "top") {
          this.element.style.top = sourceRect.y - currentRect.height + "px";
          this.element.style.left = sourceRect.x + "px";
        }
        // 右侧
        else if (direction == "right") {
          this.element.style.top = Math.max(10, (sourceRect.y + (sourceRect.height / 2)) - currentRect.height / 2) + "px";
          this.element.style.left = (sourceRect.x + sourceRect.width + 8) + "px";
        }
        // 左侧
        else if (direction == "left") {
          this.element.style.top = Math.max(10, (sourceRect.y + (sourceRect.height / 2)) - currentRect.height / 2) + "px";
          this.element.style.left = (sourceRect.x - currentRect.width - 8) + "px";
        }
      }
    });
  }

  @HostListener("click", ["$event"])
  stop($event: MouseEvent): void {
    if (!this.options.autoClose) {
      $event.stopPropagation();
    }
  }

  ngOnDestroy(): void {
    this.unScrollTableSubscribe();
  }

}
